<template>
	<view>
		<swiper :circular="true" class="swipers" @change="change" :current="current" :vertical="true"
			:indicator-dots="false" :autoplay="false" :interval="3000" :duration="300">
			<swiper-item class="swipers-item" v-for="(item,index) in videoList" :key="item.courseDetailsId">
				<view class="swipers-items">
					<!-- 视频 -->
					<video @timeupdate="timeupdate" @waiting="waiting()" object-fit="cover"
						v-if="current === index && item.videoUrl  && item.DYvideourl" :play-strategy="2" :show-loading="true"
						codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
						@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
						:poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.DYvideourl" :autoplay="item.autoPlay"
						class="swipers-items-video"></video>
				<!-- 	<video-player
								@bindtimeupdate="timeUpdateHandler"
								@bindgetsource="getsourceHandler"
								:enable-dark-water-mark="true"
								:cloud-type="1"
								:version="1"
								:album-id="albumId"
								:episode-id="item.dyEpisodeId"
								:autoplay="true"
								style="width:100vw; height:98%;z-index: 1;"
								object-fit="contain"
								:show-fullscreen-btn="false"
								:show-play-btn="true"
								:vslide-gesture-in-fullscreen="false"
								:controls="true"
								@bindended="nextVideo"
								@binderror="error"
							>
							</video-player> -->
						<!-- <video-player v-if="playletshow"  id="myVideo" :album-id="albumId" :episode-id="episodeId"
						 :cloud-type="cloudType" @version="version" @error="cptEventAssert" object-fit="cover" 

						 :muted="false" :controls="false" :show-progress="false" :show-fullscreen-btn="false" 
						 @timeupdate="timeupdate"  @ref="refHandler"
						:play="cptEventAssert"></video-player> -->

												<!-- https://blog.csdn.net/m0_51534164/article/details/134168083 -->

					<!-- :autoplay="item.autoPlay" -->
					<!-- 没有视频权限则显示封面图 -->
					<!-- <image v-else @click="handleimage" :src="item.titleImg" class="swipers-items-imgsbg"
						mode="aspectFill"></image> -->
					<!-- 返回图标 -->
					<!-- <u-icon name="arrow-left" @click="goBack()" class="swipers-items-back" :style="{top:meunTop+'px'}"
						color="#ffffff" size="38"></u-icon> -->
					<!-- 视频信息 -->
					<view class="swipers-items-info">
						<!-- 标题 -->
						<view class="swipers-items-info-title">
							{{item.courseDetailsName}}
						</view>
						<!-- 简介 -->
						<view class="swipers-items-info-content" v-html="item.content">

						</view>
						<!-- 集数 -->
						<view @click="openShow()" class="swipers-items-info-num">
							第{{item.seqNum}}集（共{{meunList.length}}集）选集 >
						</view>
					</view>
					<!-- 右侧操作 -->
					<view class="swipers-items-right">
						<view class="swipers-items-right-item">
							<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
								<u-icon name="heart-fill" v-if="item.isGood!=0" color="red" size="60"></u-icon>
								<u-icon name="heart-fill" v-else color="#ffffff" size="60"></u-icon>

							</view>
							<view class="swipers-items-right-item-txt">
								{{item.goodNum}}
							</view>
						</view>
						<view class="swipers-items-right-item">
							<button class="shareBtn" style="background-color: #ff000000;padding: 0;" open-type="share">
							<view class="swipers-items-right-item-img">

								<image src="../../static/images/me/share.png" mode=""></image>
							</view>
							</button>
							<view class="swipers-items-right-item-txt">
								分享
							</view>
						</view>
						<view class="swipers-items-right-item" v-if="item.isCollect == 0">
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
								<image src="../../static/images/me/shuqian.png" style="height: 60rpx;" mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								追剧
							</view>
						</view>
						<view class="swipers-items-right-item" v-else>
							<view class="swipers-items-right-item-img" @click.stop="shoucang(item)">
								<image src="../../static/images/me/shuqian_s.png" style="height: 60rpx;" mode="">
								</image>
							</view>
							<view class="swipers-items-right-item-txt">
								已追
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-popup :closeable="true" close-icon="arrow-down" close-icon-size="40" close-icon-color="#ffffff"
			:mask-custom-style="maskCustomStyle" v-model="show" height="800rpx" border-radius="24" mode="bottom">
			<view class="list">
				<view class="list-title flex align-center">
					<u-icon name="list" class="list-title-icon" color="#ffffff" size="40"></u-icon>
					当前播放第{{num}}个视频
				</view>
				<view class="list-box">
					<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true"
						style="width: 100%;height: 700rpx;padding-bottom: 30rpx;">
						<view :id="item.viewInfo" class="list-box-item flex justify-between" @click="selectPlay(item)"
							v-for="(item,index) in meunList" :key="index">
							<view class="list-box-item-l">
								<image :src="item.titleImg" mode="aspectFill"></image>
							</view>
							<view class="list-box-item-r">
								<view class="list-box-item-r-title flex align-center justify-between">
									<!-- 第{{index+1}}集 -->
									第{{ item.seqNum }}集
									<view class="list-box-item-r-title-t" v-if="('video'+index) == scrollIntoView">
										正在播放
									</view>
								</view>
								<view class="list-box-item-r-titles">
									《{{item.courseDetailsName}}》
								</view>
								<view class="list-box-item-r-content" v-html="item.content">

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- 购买视频 -->
		<view class="purchase">
		<u-popup :closeable="true" close-icon="arrow-down" close-icon-size="40" close-icon-color="#ffffff"
			:mask-custom-style="maskCustomStyle" v-model="showPay" height="670px"
			border-radius="24" mode="bottom">
			<view class="list">
				<view class="title">
					充值后精彩继续
				</view>
				<view class="balance">
						<view class="balance_a">
							解锁本集: <text style="color: #2f2d2d;margin-left: 10px;">{{episodePrice}}瓜币</text>
						</view>
						<view class="balance_b">
							账户余额:<text style="color: #2f2d2d;margin-left: 10px;">{{guabiBalance}}瓜币</text>
						</view>
				</view>
				<view class="balance_border">

				</view>
				<!-- <view class="drama-series"> -->
					<scroll-view scroll-y="true" class="drama-series">
						<view class="" style="width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: flex-start;">

					<view class="drama-series-list" v-for="(item,index) in dramaList" :key="index">
						<view class="drama-series-list-color" @click="payEpisode(item)" v-if="item.type == 'unlock'">
							<text class="first-text-class">{{item.guabi}}瓜币</text>
							<!-- <text class="second-text-class" v-if="osname == 'ios'">{{item.diamond}}钻</text> -->
							<!-- <text class="second-text-class" v-if="osname != 'ios'">{{item.rmb}}元</text> -->
							<text class="second-text-class">{{item.guabi}}瓜币解锁本集</text>
						</view>
						<!-- <view class="drama-series-list-color" @click="moneyPay(item)" v-if="item.type == 'episode'">
							<text class="first-text-class">{{item.guabi}}瓜币</text>
							<text class="second-text-class" v-if="osname == 'ios'">{{item.diamond}}钻</text>
							<text class="second-text-class" v-if="osname != 'ios'">{{item.rmb}}元</text>
							<text class="second-text-class">{{item.guabi}}瓜币购买本集</text>
						</view> -->
						<view class="drama-series-list-color"  @click="payAlbum(item)" v-if="item.type == 'album'" style="    background-image: linear-gradient(to bottom, rgb(234 228 221),rgb(254,206,78));border-radius: 10px;">
							<text class="first-text-class">{{item.guabi}}瓜币</text>
							<!-- <text class="second-text-class" v-if="osname == 'ios'">{{item.diamond}}钻</text> -->
							<!-- <text class="second-text-class" v-if="osname != 'ios'">{{item.rmb}}元</text> -->
							<text class="second-text-class">整本购</text>
							<text class="second-text-class">永久解锁全集</text>
						</view>
						<view class="drama-series-list-color" @click="moneyPay(item)" v-if="item.type == 'recharge'">
							<text class="first-text-class" v-if="osname == 'ios'">{{item.diamond}}钻</text>
							<text class="first-text-class" v-if="osname != 'ios'">{{item.rmb}}元</text>
							<text class="second-text-class">{{item.guabi}}充值瓜币</text>
							<text class="second-text-class" v-if="item.giveGuabi != 0">{{item.giveGuabi}}赠送瓜币</text>
							<!-- <text class="second-text-class">瓜币充值</text> -->
						</view>
						<view class="drama-series-list-color" @click="pay(item)" v-if="item.type == 'vip'" style="background-image: linear-gradient(to right, rgb(251,62,10), rgb(251,32,10));border-radius: 10px;color: #fff;">
							<text v-if="osname != 'ios'" class="first-text-class">{{item.rmb}}元</text>
							<text v-if="osname == 'ios'" class="first-text-class">{{item.diamond}}钻</text>
							<text v-if="item.vipNameType == 0" class="second-text-class" >30天会员全站免费看</text>
							<text v-if="item.vipNameType == 1" class="second-text-class" >90天会员免费看</text>
							<text v-if="item.vipNameType == 2" class="second-text-class" >360天会员免费看</text>
						</view>
					</view>
					</view>
					</scroll-view>
				<!-- </view> -->
			<!-- 	<button style="padding: 0; margin: 0; background: none; border: none;font-size: 13px;background-color: #5173F8;    color: #fff;
    margin-top: 10px;" class="imButton  tool-box-content-item flex align-center justify-center flex-wrap" open-type="im"
				  :data-im-id="imId"
				  @im="imCallback"
				  @error="onimError">
					<view class="tool-box-content-item-txt">
						在线客服 9:00~22:00
					</view>
				</button> -->
				<view style="margin: 10rpx auto;margin: 5px auto;position: fixed;bottom: 10%;right: 0;">
							<button
							  open-type="im"
							  :data-im-id="imId"
							  @im="imCallback"
							  @error="onimError"
							  style="
								background-color: rgb(94 97 109 / 57%);
								color: #FFFFFF;
								font-size: 12px;
								height: 60px;
								width: 75px;
								padding: 0;"

							>
							<view class="">
								<u-icon name="server-man" color="#fff" size="28"> </u-icon>
								<text style="margin: 0 5px;">客服</text>
							</view>

							  <text style="display: block;font-size: 9px;">9:00~22:00</text>
							</button>
					</view>
				<view  class="agreement">
					<text>1.瓜币和会员属于虚拟商品,一经购买不得退换;
					</text>
					<text>2.未满18岁未成年应在监护人的监护指导下进行付费操作;</text>
					<text>3.瓜币和会员仅在本小程序生效使用,充值后即可直接观看。</text>
				</view>
			<!-- 	<view class="list-title flex align-center">
					<u-icon name="lock" class="list-title-icon" color="#efbb6b" size="40"></u-icon>
					当前视频 没有播放权限
				</view>
				<view class="list-item">
					<view class="list-item-box" @click="payVideo(1)">
						购买整部视频
					</view>

				</view>
				<view class="list-item">
					<view class="list-item-box" @click="payVideo(2)">
						购买单集视频
					</view>
				</view>
				<view class="list-item" v-if="isVips == '是'">
					<view class="list-item-box" @click="goNav('/pages/me/vip/index')">
						开通会员
					</view>
				</view> -->
			</view>
		</u-popup>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#fff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  
		Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<u-popup width="686" v-model="showImg" mode="center" border-radius="14">
			<image :show-menu-by-longpress='true' :src="haibaoImg" style="width: 100%;" mode="widthFix"></image>
		</u-popup>
	</view>
</template>

<script>
	//导入地址
	import config from '../../common/config.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	import Videoplayer from '../components/videoplayer.vue'
	export default {
		components: {
			tkiQrcode,
			Videoplayer
		},
		data() {
			return {
				videoid:'',
				videostatus:false,
				playletshow:false,
			    albumId: '7424405181451731506',
				episodeId: '7425478328502583808',
				// 7425176656479781385
				// 7426182815542149647
				// 7426247437049659939
				// 7426256586505224745
				cloudType: 1,
				version: 1,
				dramaList:[],
				guabiBalance:'',
				episodePrice:'',
				imId:'chiguakefu',
				isStart: false, //是否开始生成二维码
				erweima: '',
				qrCodeData: '',
				haibaoImg: '',
				showImg: false,
				haibaoShow: false,
				title: '',
				imgSrc: '',
				current: 0,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				show: false,
				videoList: [],
				videoSlist:[],
				videoContext: null, //记录当前视频的上下文
				isVIP: false, //是否是vip
				courseId: '',
				meunList: [], //菜单
				meunTop: 0, //返回图标距离顶部的距离
				num: 1, //当前播放的集数
				showPay: false, //购买视频的弹窗
				info: {}, //整部的信息
				courseDetailsId: '', //详情id
				scrollIntoView: '', //当前播放视频的位置
				scrollIntoViews: 'video0', //当前播放视频的位置
				isVips: '否', //是否显示会员，
				osname:'',//登录设备型号
				clickid: '',
				timer:null,
				channelNo:'',
				isLogin:false
			};
		},
		computed: {
			swiperList() {
				if(this.videoList.length==0){
					return
				}
				console.log(this.videoList,'asdasdasda')
				this.videoList.map(item=>{
					let data = {
						 dyCloudId:item.dyCloudId,
						 // dyCloudId:'v0dd4dg10004cs7ji8qljhteffetor6g',

					}
					this.$Request.getT('/app/coursePlayer/getVideoPlayLink', data).then(res=>{
						// console.log(res,'获取视频链接获取视频链接')
						// item.videoUrl = res.data[0].main_play_url
						if(res.code == 0){
							if(!item.DYvideourl){
									this.$set(item,'DYvideourl',res.data[0].main_play_url)
							}

						}
					})
					return item
				})
				this.startPlay(this.current)
				this.videostatus = true
				return this.videoList
			}
		},
		onLoad(e) {
			let token = uni.getStorageSync('token')
			if(!uni.getStorageSync('osName')){
				const systemInfo = wx.getSystemInfoSync();
				uni.setStorageSync('osName',systemInfo.osName)
			}
			if(!token){
				this.TTlogin()
			}else{
				this.isLogin = true;
			}
			
			uni.setNavigationBarColor({
			      frontColor: '#ffffff', // 前景色值，包括按钮、标题、状态栏的颜色
			      backgroundColor: '#000000', // 背景颜色值，包括背景、按钮、状态栏的颜色
			      animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			      }
			    });

			// 	this.preloadplaylet()
			// 	this.refHandler()
				// console.log(tt.canIUse('video-player'))
				// console.log(tt.canIUse('preloadResourceVideo'),'TTplayer')
				// console.log(tt.canIUse('video-player.cloudType'),'QQQQQQQQQQQQQQ')
			// #ifdef MP-WEIXIN
			if (e.scene) { //这里为线上操作
				//此处的二维码  page/index/index?brokerId=123
				let scene = decodeURIComponent(e.scene);
				scene = scene.split(',')
				uni.setStorageSync('invitation', scene[0])
				this.courseId = scene[1]
				this.courseDetailsId = scene[2]
				this.getDataList(this.courseId, this.courseDetailsId);
			}
			
			// #endif
			if (e.invitation) {
				uni.setStorageSync('invitation', e.invitation)
			}
			//渠道来源
			if(e.channel_no){
				uni.setStorageSync('channel_no', e.channel_no)
			}
			if (e.id) {
				this.courseId = e.id
				if (e.courseDetailsId) {
					this.courseDetailsId = e.courseDetailsId
					this.videoid = e.courseDetailsId
				}
				console.log(this.courseDetailsId, '跳转进来的id')
				this.getDataList(this.courseId, this.courseDetailsId);
			}
						},
		onShow() {
			this.osname = uni.getStorageSync('osName')
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
			//渠道来源
			this.channelNo = uni.getStorageSync('channel_no')
			let that = this
				uni.$on('back', (data) => {
					if (data.flag == true) {
						that.showPay = false
						that.getDataList(that.courseId, that.courseDetailsId, true);
					}
				})


		},
		onReady() {
			// #ifdef MP-WEIXIN
			let info = uni.getMenuButtonBoundingClientRect()
			this.meunTop = info.top + ((info.height - 19) / 2)
			// #endif
			// #ifndef MP-WEIXIN
			this.meunTop = 37
			// #endif
		},
		watch: {
			//监听当前播放的集数
			current() {
				this.comNumVideo()
			} 
		},
		methods: {
			//解锁集
			payEpisode(val) {
				if (val.enoughToPay) {
					this.paynumberofepisode(2)
				} else {
					let data = {
						courseId: this.videoList[this.current].courseId,
						courseDetailsId: this.videoid,
						channelNo:this.channelNo
					}
					this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
						if (res.code == 0) {

							this.payAlbumOrEpisodeOrder(res.data.orders.ordersId, val.rmb)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			//解锁剧
			payAlbum(val) {
				if (val.enoughToPay) {
					this.paynumberofepisode(1)
				} else {
					let data = {
						courseId: this.videoList[this.current].courseId,
						channelNo:this.channelNo
					}
					this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
						if (res.code == 0) {

							this.payAlbumOrEpisodeOrder(res.data.orders.ordersId, val.rmb)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			payAlbumOrEpisodeOrder(orderId, rmb) {
				const that = this
				const systemInfo = uni.getSystemInfoSync();
				that.$u.post('/app/douyinPay/commonTrade/payOrder?orderId=' + orderId + '&classify=6' + '&plateform=' + systemInfo.platform).then(red => {
					if (red.code === 0) {
						tt.login({
							force: true,
							success: (o) => {
								tt.requestOrder({
									data: red.data,
									byteAuthorization: red.byteAuthorization,
									success: (payRes) => {
										tt.getOrderPayment({
											orderId: payRes.orderId,
											success:()=>{
												//回传
												try {
													const clickid = uni.getStorageSync("ad_clickid")
													if (!!clickid) {
														let reqBody = {
															"event_type": "successful_pay", 
															"context": {
																"ad": {
																	"callback": clickid
																}
															},
															"timestamp": new Date().getTime()
														}
														this.$u.post('app/conversion/doConversion', reqBody)


														let reqBody2 = {
															"event_type": "active_pay", 
															"context": {
																"ad": {
																	"callback": clickid
																}
															},
															properties: {
																"order_id": orderId,
																"pay_amount": rmb * 100
															},
															"timestamp": new Date().getTime()
														}
														this.$u.post('app/conversion/doConversion', reqBody2)
													}
												} catch (e) {

												}
												// setTimeout(function() {

												this.timer = setTimeout(()=>{
														that.showPay = false
														that.getDataList(that.courseId, this.videoid, true);
													},1000)
												this.timer = null
												clearInterval(this.timer)
												// }, 1000)
											}
										})

									},
									fail: (err)=> {
										console.log("抖音下单失败！" , err)
									}
								})
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: '支付失败!'
						});
					}
				})
			},


			TTlogin(){
				let that = this
					tt.login({
						  force: true,
						  success(res) {
							  console.log('登录')
							that.TTloginOpenid(res.code)
						  },
						  fail(res) {
							console.log(`login 调用失败`);
						  },
						});
					},
					fail(res) {
					  console.log("getUserProfile 调用失败", res);
				},
				TTloginOpenid(_code){
					let data = {
						code:_code
					}
						this.$Request.getT('/app/Login/douyinLogin', data).then(res => {
						console.log(res,'换取openid')

						this.getUserData(res.data.open_id)
						})
				},
				getUserData(_openId){
						this.$u.post("/app/Login/insertDouyinUser", {
							openId:_openId,
							// userName:this.userName,
							// avatar:this.avatar,
							// sex:this.sex
						}).then(res => {
							console.log(res,'登陆成功')
							
							uni.setStorageSync("token", res.token)
							uni.setStorageSync("userId", res.user.userId)
							uni.setStorageSync('loginStatu',false)
							uni.setStorageSync('logintime',res.expireDate)
							this.isLogin = true;
							
							//插入历史记录
							this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
								.courseDetailsId)
							// uni.switchTab({
							// 	url: '/pages/index/index'
							// })
						});
				},
				//分享
			onShareAppMessage(option){
				console.log(option,'=========',this.videoList[this.current])
				return {
						path: 'me/detail/detail' , 
						title: this.videoList[this.current].courseDetailsName,
						imageUrl: this.videoList[this.current].titleImg,
						  success() {
								console.log(
								  "转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调"
								);
							  },
					}
			},
			playvideo(){
				console.log(this.videoContext)
					this.videoContext.play()
			},
			refHandler (ref) {
				console.log(ref,'refs')
			   // 这样就能进行操作 video-player 播放器了
			   this.videoContext = uni.createVideoContext('myVideo')
			   // this.videoContext.play()
			   console.log(this.videoContext,'this.videoContext')
			},
			  cptEventAssert (event) {
			    console.log("event", event)
			  },
			   preloadplaylet() {
				   let that = this
			     tt.preloadResourceVideo({
			       albumId: that.albumId,
			       episodeId: that.episodeId,
			       cloudType: that.cloudType,
			       version: that.version,
			       success: () => {
					   console.log('短剧预加载成功1111111')
			         tt.showToast({
			           title: '短剧预加载成功', // 内容
			         });
			         that.playletshow = true
					// that.videoContext.play()
			         // that.refHandler()
			       },
			       fail: (error) => {
			         console.log("短剧预加载失败1111111111", error);
			         tt.showToast({
			           icon: 'fail',
			           title: '短剧预加载失败'
			         })
			         that.playletshow = true
					 that.refHandler()
			       },
			     });
			   },
			payOrder(orderId) {
				let that = this
				// console.log(that.courseId,that.courseDetailsId,'3333333333')
				// return
				this.$Request.postT("/app/order/payOrders", {
					orderId: orderId,
				}).then(res => {
					console.log(res,'====')
					if (res.code == 0) {
						uni.showToast({
							title: '支付成功'
						})
						// setTimeout(function() {
						this.timer = setTimeout(()=>{
								that.showPay = false
								that.getDataList(that.courseId, this.videoid, true);
							},1000)
						this.timer = null
						clearInterval(this.timer)
						// }, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			//购买集数
			paynumberofepisode(type){
				// let courseId = this.videoList[this.current].courseId
					let data = {
						courseId: this.videoList[this.current].courseId,
						channelNo:this.channelNo
					}
					if (type != 1) { //购买单集
						data.courseDetailsId = this.videoid
					}
					this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
						console.log(res,'测试测试测试测试')
						if (res.code == 0) {

							this.payOrder(res.data.orders.ordersId)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			},

			//充值瓜币
			moneyPay(feeTemp){
			const systemInfo = uni.getSystemInfoSync();
			let url = '/app/douyinPay/commonTrade/payMoney?feeTempItemId=' + feeTemp.feeTempItemId + '&classify=6' + '&plateform=' + systemInfo.platform
			if(this.channelNo){
				url = url +'&channelNo='+this.channelNo;
			}
			this.$u.post(url).then(red => {
				if (red.code === 0) {
					tt.login({
						force: true,
						success: (o) => {
							tt.requestOrder({
								data: red.data,
								byteAuthorization: red.byteAuthorization,
								success: (payRes) => {
									tt.getOrderPayment({
										orderId: payRes.orderId,

										success:()=>{

											//回传
											try {
												const clickid = uni.getStorageSync("ad_clickid")
												if (!!clickid) {

													let reqBody = {
														"event_type": "successful_pay", 
														"context": {
															"ad": {
																"callback": clickid
															}
														},
														"timestamp": new Date().getTime()
													}
													this.$u.post('app/conversion/doConversion', reqBody)


													let reqBody2 = {
														"event_type": "active_pay", 
														"context": {
															"ad": {
																"callback": clickid
															}
														},
														properties: {
															"pay_amount": feeTemp.rmb * 100
														},
														"timestamp": new Date().getTime()
													}
													this.$u.post('app/conversion/doConversion', reqBody2)
												}
											} catch (e) {

											}




											this.showPay = false
											this.paynumberofepisode(2)
										}
									})			
								},
								fail: (err)=> {
								}
							})
						}
					})

				} else {
					uni.showToast({
						icon: 'none',
						title: '支付失败!'
					});
				}
			})	
			},
			//充值会员
			pay(e){
				this.vipId = e.feeTempItemId
				let that = this
				let data = {
					vipDetailsId: that.vipId,
					channelNo:that.channelNo
				}
				let userId = uni.getStorageSync('userId')
				const systemInfo = uni.getSystemInfoSync();	
				that.$u.api.VipOrders(data).then(res => {
					let url = '/app/douyinPay/commonTrade/payOrder?orderId=' + res.data.ordersId + '&classify=6' + '&plateform=' + systemInfo.platform
					that.$u.post(url).then(red => {
						if (red.code === 0) {
							tt.login({
								force: true,
								success: (o) => {
									tt.requestOrder({
										data: red.data,
										byteAuthorization: red.byteAuthorization,
										success: (payRes) => {
											tt.getOrderPayment({
												orderId: payRes.orderId,
												success:()=>{
													//回传
													try {
														const clickid = uni.getStorageSync("ad_clickid")
														if (!!clickid) {
															let vipName = ""
															switch (e.vipNameType) {
																case 0:
																	vipName = '30天会员'
																	break;
																case 1:
																	vipName = '90天会员'
																	break;
																case 2:
																	vipName = '360天会员'
																	break;
															}

															let reqBody = {
																"event_type": "successful_pay", 
																"context": {
																	"ad": {
																		"callback": clickid
																	}
																},
																"timestamp": new Date().getTime()
															}
															this.$u.post('app/conversion/doConversion', reqBody)


															let reqBody2 = {
																"event_type": "active_pay", 
																"context": {
																	"ad": {
																		"callback": clickid
																	}
																},
																properties: {
																	"order_id": res.data.ordersId,
																	"pay_amount": e.rmb * 100
																},
																"timestamp": new Date().getTime()
															}
															this.$u.post('app/conversion/doConversion', reqBody2)
														}
													} catch (e) {

													}


													that.showPay = false
													that.getDataList(that.courseId, that.courseDetailsId,true);
												}
											})
											let data = {
												userId: uni.getStorageSync('userId')
											}
											that.$u.api.userVip(data).then(res => {
												console.log(res,'-----------------------')
												if (res.code == 0 && res.data && res.data
													.isVip ==
													2) {
													uni.setStorageSync('isVIP', true)

												} else {
													uni.setStorageSync('isVIP', false)
												}
											})
										},
										fail: (err)=> {
										}
									})
								}
							})

						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!'
							});
						}
					})
				})
			},
		    imCallback(e) {
			  console.log("跳转IM客服成功", e.detail);
			},
			onimError(e) {
							  console.log(this.imId)
			  console.log("拉起IM客服失败", e.detail);
			},
			//播放进度变化回掉
			timeupdate(e) {
				//隐藏loding
				// uni.hideLoading()
			},
			//缓冲中
			waiting(e) {
				//在h5状态下视频出现缓冲则显示loding
				// #ifdef H5
				// uni.showLoading()
				// #endif
			},
			openShow() {
				this.show = true
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
				})

			},
			/**
			 * @param {String} path //返回的二维码地址
			 */
			qrR(path) {
				this.qrCodeData = path
				this.haibaoShow = true

			},
			//生成失败
			posterError() {
				this.haibaoImg = ''
				this.showImg = false
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.showToast({
					title: '海报生成失败',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			/**生成成功
			 * @param {String} img 成功回调的图片
			 */
			posterSuccess(img) {
				this.haibaoImg = img.tempFilePath
				this.showImg = true
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.hideLoading()
				uni.showToast({
					title: '长按图片保存海报',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			//分享
			share(item) {
				this.imgSrc = this.info.titleImg
				// #ifndef MP-WEIXIN
				let urls = config.APIHOST2 + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
					.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode')
				this.erweima = urls
				this.isStart = true
				// #endif


				// #ifdef MP-WEIXIN
				let that = this
				let data = {
					invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
						.courseDetailsId,
					page: 'me/detail/detail'
				}
				uni.downloadFile({
					url: config.APIHOST + '/app/invite/mpCreateQr?invitationCode=' + data.invitationCode +
						'&page=' + data.page,
					success(res) {
						if (res.statusCode === 200) {
							that.qrCodeData = res.tempFilePath
							that.haibaoShow = true
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
						}
					}
				})
				// #endif
			},
			/**
			 * @param {Object} type 类型 
			 * 1:购买整部视频
			 * 2:购买单集视频
			 */
			payVideo(type) {
				// 首先生成订单
				let courseId = this.videoList[this.current].courseId
				let courseDetailsId = this.videoList[this.current].courseDetailsId
				let titleImg = this.videoList[this.current].titleImg
				let courseDetailsName = this.videoList[this.current].courseDetailsName
				let name = this.info.title
				let zongPrice = this.info.price
				let price = this.videoList[this.current].price
				let data = {
					courseId,
					courseDetailsId,
					titleImg,
					courseDetailsName,
					price,
					zongPrice,
					type,
					name
				}
				uni.navigateTo({
					url: '/me/payOrder/payOrder?info=' + JSON.stringify(data)
				})
			},
			//去开通会员
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			//收藏
			shoucang(item) {
				let data = {
					courseId: item.courseId,
					courseDetailsId: item.courseDetailsId,
					classify: 1,
					type: item.isCollect == 0 ? 1 : 0
				}
				this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
					if (res.code == 0) {
						if (data.type == 1) {
							item.isCollect = 1
						} else {
							item.isCollect = 0
						}
					}
				})
			},
			//点赞
			dianzan(item) {
				let data = {
					courseId: item.courseId,
					courseDetailsId: item.courseDetailsId,
					classify: 2,
					type: item.isGood == 0 ? 1 : 0
				}
				this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
					if (res.code == 0) {
						if (data.type == 1) {
							item.isGood = 1
							item.goodNum += 1
						} else {
							item.isGood = 0
							item.goodNum -= 1
						}
					}
				})
			},
			//计算正在观看哪个视频
			comNumVideo() {
				let courseDetailsId = this.videoList[this.current].courseDetailsId
				this.meunList.map((item, index) => {
					if (item.courseDetailsId == courseDetailsId) { //找到了
						this.num = item.num
					}
				})
			},
			//选择集数后在更新剩下的数据
			setVideoList(index) {
				//判断后续是否还有两条视频
				let lengths = this.meunList.length - (index + 1)
				//有最少两条
				if (lengths >= 2) {
					//直接拿两条赋值进去
					this.videoList = [...this.videoList, ...this.meunList.slice(index + 1, index + 3)]
				}
				//只剩一条数据
				if (lengths == 1) {
					//把剩下的一条给放进去
					this.videoList = [
						//选中的那条
						...this.videoList,
						//身下的一条
						this.meunList[this.meunList.length - 1],
						//最后一条则放总数组的第一条
						this.meunList[0]
					]
				}
				//选择的就是最后一条数据
				if (lengths == 0) {
					//后两条拿总数组的前两条就可以了
					this.videoList = [...this.videoList, ...this.meunList.slice(0, 2)]
				}
				//更新视图
				this.$forceUpdate()
			},
			//选择播放
			selectPlay(item) {
				this.videoid = item.courseDetailsId
				// 根据选择的courseDetailsId拿到meunList列表中的相同数据的下标
				const index = this.meunList.findIndex(menu => menu.courseDetailsId === item.courseDetailsId);
				this.videoList = [this.meunList[index]]
				this.current = 0
				//重新计算一下当前观看的是哪个视频
				this.comNumVideo()
				// 把选择的视频的自动播放设置为true
				this.videoList[this.current].autoPlay = true
				//让当前选择的视频播放
				this.startPlay(this.current)
				//更新视图
				this.$forceUpdate()
				//关闭选择弹窗
				this.show = false
				//记录当前播放位置
				this.scrollIntoView = 'video' + index
				//插入历史记录
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
					.courseDetailsId)
				//等视图跟新完了，把之前剩下的数据补进去在$nextTick中处理
				this.$nextTick(() => {
					this.setVideoList(index)
				})
			},
			// 资源详情
			getDataList(id, courseDetailsId, type) {
				let data = {
					id,
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				}
				this.$u.api.selectCourseDetailsById(data).then(res => {
					console.log(res,'-----------------------------')
					if (res.code == 0) {
						if (res.data.listsDetail) {
							//抖音id
							// this.albumId = res.data.dyAlbumId
							// this.videoSlist = res.data.listsDetail
							this.info = res.data
							this.title = this.info.title
							let arr = JSON.parse(JSON.stringify(res.data.listsDetail))
							arr.map((item, index) => {
								item.num = index + 1
								if (item.videoUrl) {
									item.autoPlay = true
								} else {
									item.autoPlay = false
								}
								item.viewInfo = 'video' + index
							})
							//菜单数组
							this.meunList = arr
							console.log(this.meunList,'this.meunListthis.meunList')
							if (type == true) { //购买视频后返回的
								let courseDetailsId = this.videoList[this.current].courseDetailsId
								console.log(courseDetailsId,'courseDetailsIdcourseDetailsId')
								//找视频id
								this.videoid = courseDetailsId
								this.meunList.map((item) => {
									if (item.courseDetailsId == courseDetailsId) {
										this.videoList[this.current].videoUrl = item.videoUrl
										console.log(this.videoList[this.current],'this.currentthis.currentW')
									}
									return true
								})
								console.log(this.videoList,'视频视频',this.current)
							} else { //直接跳转进来的
								let indexs = -1
								console.log(courseDetailsId, '-------------')
								// let courseDetailsIds = courseDetailsId ? courseDetailsId : this.meunList[0]
								// 	.courseDetailsId
								if (courseDetailsId) { //从记录进来的
									this.meunList.map((item, index) => {
										if (item.courseDetailsId == courseDetailsId) {
											indexs = index
										}
									})
									console.log(courseDetailsId, '记录id')
									console.log(indexs, '记录id')
									if (indexs != -1) { //找到了
										if (Number(indexs + 1) === this.meunList.length) { //最后一条
											if (this.meunList.length == 1) { //只有一条
												this.videoList = this.meunList.slice(0, 3)
											} else if (this.meunList.length == 2) {
												this.videoList = this.meunList.slice(0, 3)
											} else {
												this.videoList = [
													this.meunList[this.meunList.length - 1],
													this.meunList[0],
													this.meunList[1],
												]
											}

										} else if (Number(indexs) === Number(this.meunList.length - 1)) { //倒数第二条
											if (this.meunList.length == 1) { //只有一条
												this.videoList = this.meunList.slice(0, 3)
											} else if (this.meunList.length == 2) { //有两条的时候
												this.videoList = [
													this.meunList[1],
													this.meunList[0],
												]
											} else {
												this.videoList = [
													this.meunList[this.meunList.length - 2],
													this.meunList[this.meunList.length - 1],
													this.meunList[0],
												]
											}

										} else {
											//如果不是最后一条，也不是倒数第二条，则从找到的位置开始往后拿三条数据放入数组
											this.videoList = this.meunList.slice(indexs, indexs + 3)
										}
									} else {
										//没找到直接拿前三条数据即可
										this.videoList = this.meunList.slice(0, 3)
									}
								} else { //新的视频
									// //视频数组//直接拿前三条
									this.videoList = this.meunList.slice(0, 3)
									indexs = 0
								}
								console.log(this.videoList)
								//重新计算当前在播放哪个视频
								this.comNumVideo()
								if (indexs != -1 && this.meunList.length > 0) {
									this.$nextTick(() => {
										this.scrollIntoView = 'video' + indexs
									})

								}
							}
							let numIdCurr = this.videoList[0].courseDetailsId
							this.videoContextId = 'myVideo' + numIdCurr

							this.$nextTick(() => {
								this.videoContext = uni.createVideoContext(this.videoContextId, this)
								this.videoContext.play()
							})
							this.$forceUpdate()
							//插入历史记录
							this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
								.courseDetailsId)


						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none'
						});
					}

				})
			},
			setHistor(courseId, courseDetailsId) {
				if(!this.isLogin){
					return
				}
				let data = {
					courseId: courseId,
					courseDetailsId: courseDetailsId,
					classify: 3,
					type: 1
				}
				this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
			},


			// swiper上下切换事件
			change(e) {
				this.videostatus = false
				console.log(e,'上下滚动播放索引')
				//拿出当前的swiper索引
				let current = Number(e.detail.current)
				// 根据courseDetailsId在meunList中找到这个数据的下标
				let indexs = -1;
				//考虑向上滑动的时候	
				this.videoid = this.videoList[current].courseDetailsId
				console.log(current, '滑动的current')
				console.log(this.current, '当前的current')
				console.log(this.videoList, '当前的current')
				//没有三条的时候
				if (current == 1 && this.current == 0) {

				}
				// 有三条的时候
				if (current == 2 && this.current == 0) {
					//向上滑到头的时候先拿第一条数据的courseDetailsId
					let courseDetailsId = this.videoList[0].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(0, indexs)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之前的三条
							//因为slice(str,end)，包含str，不包含end，所以拿三条数据则-3
							this.videoList = this.meunList.slice(indexs - 3, indexs)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[2] = this.meunList[indexs - 1] //把剩下的一条取出来放到要滑动的那一页
									//因为剩下的数据不够了，则拿meunList末尾的两条数据补齐
									//第二个用最后一条数据
									arr[1] = this.meunList[this.meunList.length - 1]
									//第一个用倒数第二条数据
									arr[0] = this.meunList[this.meunList.length - 2]
									//赋值
									this.videoList = arr
									break;
									//只有二条
								case 2:
									//还剩下两条数据的时候
									//把剩下的倒数第一条取出来放到要滑动的那一页
									arr[2] = this.meunList[indexs - 1]
									//把剩下的最后一条放到第二个元素
									arr[1] = this.meunList[indexs - 2]
									//最后一个元素则由meunList的最后一条补齐
									arr[0] = this.meunList[this.meunList.length - 1]
									//最后赋值
									this.videoList = arr
									break;
								default:
									//一条都没有的时候 [1,2,3,4,5,6]
									//直接把meunList末尾的三条放入数组即可
									this.videoList = this.meunList.slice(-3)
									break;
							}
						}
					}
				}
				//考虑向下滑动
				if (current == 0 && this.current == 2) { //是否滑动到第一条，虽然刚进入页面current为0，但是首次不触发
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[2].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					//记录当前数据在meunList中的下标
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之后的三条
							this.videoList = this.meunList.slice(indexs + 1, indexs + 4)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[0]
									arr[2] = this.meunList[1]
									this.videoList = arr
									break;
								case 2:
									//只有二条
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[indexs + 2]
									arr[2] = this.meunList[0]
									this.videoList = arr
									break;
								default:
									//刚好没有数据了 直接拿meunList的前三条数据
									this.videoList = this.meunList.slice(0, 3)
									break;
							}
						}
					}
				}

				//获取当前播放的视频在菜单数组中的位置
				let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
					.courseDetailsId)
				//记录当前播放位置
				this.scrollIntoView = 'video' + scrollIndex
				//控制播放
				this.startPlay(current)
				//设置轮播图索引
				this.current = current
				//插入历史记录
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId)
			},
			startPlay(current) {
				if (this.videoContext) { //判断之前是否有视频的上下文
					this.videoContext.stop()
					this.videoContext = null
				}
				let numIdCurr = this.videoList[current].courseDetailsId
				if (this.videoList[current].videoUrl) { //已经购买可直接播放
					// 播放时记录当前播放的id
					this.videoContextId = 'myVideo' + numIdCurr
					this.videoContext = uni.createVideoContext(this.videoContextId, this)
					this.$nextTick(() => {
						//播放当前的
						this.videoContext.play()
						this.$forceUpdate()
					})


				} else { //没有视频链接则表示没有权限，需要购买 弹出购买弹窗
					this.showPay = true
					console.log(this.courseDetailsId,'this.courseDetailsIdthis.courseDetailsIdthis.courseDetailsIdthis.courseDetailsId')
					let data = {
						courseDetailsId:this.videoid,
						channelNo:this.channelNo
					}
					this.$Request.getT('/app/coursePlayer/queryPurchaseItems', data).then(res => {
						console.log(res,'获取信息')
						this.dramaList = res.data.purchaseItems
						this.episodePrice = res.data.episodePrice
						this.guabiBalance = res.data.guabiBalance
					})
				}
			},
			//没有权限点击封面
			handleimage(){
				this.showPay = true
				console.log('1111111')
				let data = {
					courseDetailsId:this.courseDetailsId,
					channelNo:this.channelNo
				}
				console.log(data,'22222222')
				this.$Request.getT('/app/coursePlayer/queryPurchaseItems', data).then(res => {
					console.log(res,'获取信息')
					this.dramaList = res.data.purchaseItems
					this.episodePrice = res.data.episodePrice
					this.guabiBalance = res.data.guabiBalance
				})
			},
			//播放时的回掉
			videoPlay(videoId) {


			},
			//监听视频播放完成
			ended() {
				// 查看是否有下一个视频
				if(this.current < this.videoList.length){
					// 有则自动翻页
					this.current += 1
				}
			},
			//返回
			goBack() {
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	.shareBtn::after{
		border: none;
	}
	page {
		background-color: #000;
	}
	.title{
		text-align: center;
		margin-top: 30rpx;
	}
	.balance{
		display: flex;
		align-items: center;
		height: 10%;
	}
	.balance_a{
		width: 50%;
		color: #656363;
	}
	.balance_b{
		color: #656363;
	}
	.balance_border{
		    width: 100%;
		    border-top: 1px solid #dcdcdc;
	}
	.drama-series{
		    // display: flex;
		    padding: 10px 0;
		    height: 60%;
		    overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			    justify-content: space-between;
			   	align-content: flex-start;
		}
	.drama-series-list{
		    width: 48%;
		    height: 93px;
		    background: #fff;
			border-radius: 10px;
			margin: 5px 0;
	}
	.drama-series-list-color{
		    width: 100%;
		    height: 100%;
	}
	.second-text-class{
		    display: block;
		    text-align: center;
		    font-size: 11px;
	}
	.first-text-class{
		    display: flex;
		    justify-content: center;
		    height: 50%;
		    align-items: center;
			    font-size: 18px;
			    font-weight: 700;
	}
	.agreement{
		    margin-top: 10px;
		    height: 10%;
		    color: #676262;
			font-size: 12px;
			display: flex;
			flex-wrap: wrap;
	}
	.list {
		width: 100%;
		height: 100%;
		padding: 10px 20px;
		background-color: rgb(227,223,222);
		// color: #ffffff;

		.list-title {
			height: 100rpx;
			width: 100%;
			// padding-top: 30rpx;
			font-size: 32rpx;
			font-weight: bold;

			.list-title-icon {
				padding-left: 30rpx;
				padding-right: 30rpx;
			}

		}

		.list-item {
			padding: 0 30rpx;

			.list-item-box {
				width: 100%;
				line-height: 90rpx;
				background-color: #fff;
				color: #000;
				font-weight: bold;
				text-align: center;
				margin-top: 40rpx;
				border-radius: 20rpx;
			}

		}

		.list-box {
			width: 100%;
			height: calc(100% - 100rpx);
		}

		.list-box-item {
			width: calc(100% - 40rpx);
			height: auto;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		.list-box-item-l {
			width: 140rpx;
			height: 100%;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}

		.list-box-item-r {
			width: calc(100% - 160rpx);
			height: 100%;
			color: #ffffff;
			font-size: 32rpx;

			.list-box-item-r-title {
				width: 100%;
				font-weight: bold;
			}

			.list-box-item-r-title-t {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #5074FF;
			}

			.list-box-item-r-titles {
				margin-top: 10rpx;

			}

			.list-box-item-r-content {
				width: 100%;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 10rpx;
				overflow: hidden; //超出的文本隐藏
				display: -webkit-box;
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}
		}
	}

	.swipers {
		width: 100%;
		height: 100vh;

		.swipers-item {
			width: 100%;
			height: 100%;
		}

		.swipers-items {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.swipers-items-imgsbg {
			position: absolute;
			width: 100%;
			height: 90%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.swipers-items-video {
			width: 100%;
			height: 98%;
			z-index: 9999;
		}

		.swipers-items-back {
			position: absolute;
			// top: 75rpx;
			left: 20rpx;
			z-index: 999;
		}

		.swipers-items-info {
			width: 80%;
			height: auto;
			position: absolute;
			bottom: 160rpx;
			left: 20rpx;
			color: #ffffff;
			font-size: 30rpx;
			z-index: 999;

			.swipers-items-info-content {
				margin-top: 10rpx;
				font-size: 26rpx;
			}

			.swipers-items-info-num {
				margin-top: 20rpx;
			}
		}

		.swipers-items-right {
			width: 60rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translate(0, -50%);
			z-index: 999;

			.swipers-items-right-item {
				width: 100%;
				margin-bottom: 40rpx;
			}

			.swipers-items-right-item-img {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.swipers-items-right-item-txt {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #ffffff;
				font-weight: bold;
				margin-top: 10rpx;
			}
		}
	}
</style>
